<template>
  <!-- 活动取消 -->
  <view class="actIsCancelled">
    <view class="content">
      <view class="content-item">
        <view class="deal-title">取消理由</view>
        <view class="thein-area">
          <u--textarea
            v-model="cancelReasons"
            placeholder="请填写本次活动取消的理由！"
            count
            maxlength="300"
            height="200"
          ></u--textarea>
        </view>
      </view>
    </view>

    <view class="btns">
      <button
        class="reset-btn lt cancelBtn"
        type="primary"
        @click="resethandle"
      >
        取消
      </button>
      <button class="submit-btn" type="primary" @click="submitHandle">
        确认
      </button>
    </view>
  </view>
</template>

<script>
import { activityDeclarationCancel } from "@/api/myself.js";
import { Toast, navBack, uniTrim } from "@/utils/util.js";

export default {
  name: "actIsCancelled",
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      baseURL: this.$baseURL,
      options: {},
      cancelReasons: "",
    };
  },
  onLoad(options) {
    this.options = options;
  },
  methods: {
    resethandle() {
      uni.navigateBack();
    },
    submitHandle() {
      if (!this.cancelReasons || !uniTrim(this.cancelReasons)) {
        Toast("请填写取消理由");
        return;
      }

      let data = {
        id: this.options.id,
        cancelReasons: this.cancelReasons,
      };

      activityDeclarationCancel(data).then((res) => {
        if (res.code == 200) {
          Toast("取消成功");
          uni.setStorageSync("declarationActTwo", true);
          navBack("back", 2);
          return;
        }
        Toast(res.message);
      });
    },
  },
};
</script>

<style lang="scss">
.actIsCancelled {
  flex: 1;
  background-color: #f9f9f9;

  .content {
    margin: 0 auto;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    border-radius: 8rpx;
    width: calc(100% - 35rpx);
    height: calc(100vh - 84px);
    overflow-y: auto;

    .content-item {
      padding: 25rpx;
      background: #fff;

      .deal-title {
        padding: 20rpx 0;
        color: #000000;
        font-size: 30rpx;
        font-weight: 500;

        text {
          color: #a1a1a1;
          font-size: 26rpx;
        }
      }

      .thein-area {
        font-size: 28rpx;
        .u-textarea--radius,
        .u-textarea__count {
          background: #f9f9f9 !important;
        }

        .u-textarea__field {
          font-size: 28rpx;
        }
      }
    }
  }
}
</style>
